<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<header>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title></title>

        <link href="/assets/images/favicon.ico" rel="icon">
        <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
        <link rel="stylesheet" href="/assets/module/admin.css?v=318" />


        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
        <script type="text/javascript" src="/assets/js/common.js?v=318"></script>
    </head>
</header>
<body>
<div class="layui-fluid">
    <div class="layui-card" >
        <div class="layui-card-body" style="min-height: 350px;">

            <form class="layui-form model-form" id="userForm">
                <input type="hidden" name="id" th:value="${model.id}">
                <!-- 用户名 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" th:value="${model.userName}">
                    </div>
                </div>

                <!-- 真实姓名 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">真实姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="realName" required lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input" th:value="${model.realName}">
                    </div>
                </div>

                <!-- 邮箱 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="email" name="email" required lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" th:value="${model.email}">
                    </div>
                </div>

                <!-- 手机号 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="tel" name="tel" required lay-verify="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input" th:value="${model.tel}">
                    </div>
                </div>


                <!-- 单位 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="department" placeholder="请输入单位" autocomplete="off" class="layui-input" th:value="${model.department}">
                    </div>
                </div>

                <!-- 职称 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">职称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" placeholder="请输入职称" autocomplete="off" class="layui-input" th:value="${model.title}">
                    </div>
                </div>

                <!-- 简介 000-->
                <div class="layui-form-item">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-block">
                        <textarea name="introduce" placeholder="请输入简介" class="layui-textarea" th:text="${model.introduce}"></textarea>
                    </div>
                </div>

                <!-- 角色 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                        <input type="radio" name="role" value="管理员" title="管理员" th:checked="${model.role == '管理员'}">
                        <input type="radio" name="role" value="班主任" title="班主任" th:checked="${model.role == '班主任'}">
                        <input type="radio" name="role" value="指导教师" title="指导教师" th:checked="${model.role == '指导教师'}">
                        <input type="radio" name="role" value="授课教师" title="授课教师" th:checked="${model.role == '授课教师'}">
                        <input type="radio" name="role" value="二级学院用户" title="二级学院用户" th:checked="${model.role == '二级学院用户'}">
                    </div>
                </div>


                <div class="layui-form-item text-center model-form-footer">
                    <button class="layui-btn" lay-filter="save" lay-submit="">保存</button>
                    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
                </div>
            </form>
            <script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
            <script>
                $(function () {
                    layui.use(['form', 'layer'], function () {
                        var layer = layui.layer;
                        var form = layui.form;

                        // 自定义验证规则
                        form.verify({
                            roleCheck: function (value, item) {
                                var roleSelected = $("input[name='role']:checked").val();
                                if (!roleSelected) {
                                    return "请选择用户角色";
                                }
                            }
                        });

                        // 监听提交
                        form.on('submit(save)', function (data) {
                            // 验证角色是否选择
                            var roleSelected = $("input[name='role']:checked").val();
                            if (!roleSelected) {
                                layer.msg("请选择用户角色", {icon: 2});
                                return false; // 阻止提交
                            }

                            // 开始网络请求
                            var loadIndex = layer.load(2);
                            $.ajax({
                                type: 'POST',
                                url: "/user/save",
                                data: JSON.stringify(data.field),
                                contentType: "application/json",
                                dataType: 'json',
                                success: function (res) {
                                    layer.close(loadIndex);
                                    if (res.code === 0) {
                                        // 刷新父页面
                                        $('#search', parent.document).click();
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                        parent.layer.msg('保存成功', {icon: 1});
                                    } else {
                                        layer.msg('保存失败: ' + res.msg, {icon: 2});
                                    }
                                },
                                error: function () {
                                    layer.close(loadIndex);
                                    layer.msg('请求失败，请稍后再试', {icon: 2});
                                }
                            });
                            return false;
                        });
                    });
                });
            </script>

        </div>
    </div>
</div>

<footer>
    <script type="text/javascript">
        var url = window.location.pathname.substring(1);
        var item = url.split("/");
        var jsUrl = "/static/module/javaweb_" + item[0] + ".js";
        document.write("<script src='" + jsUrl + "'><\/script>");
    </script>
</footer>
</body>
</html>
